<template>
    <div class="productionManagement dis-f jc-sb">
        <div class="flex-1 pr-12">
            <div class="dis-f jc-sb">
                <con-box class="w-520 h-450" title="生产管理">
                    <div class="dis-f fd-c jc-sb h-100p">
                        <div class="h-136 production-top dis-f">
                            <bar-progress :progress="production.dailyProductivity" title="生产品项达成率" />
                            <div class="data">
                                <div class="top">
                                    <div class="value">{{ production.activeDayOut }}</div>
                                    <div class="label">当日实际产量</div>
                                </div>
                                <div class="bottom">
                                    <div class="value">{{ production.plannedOutputNum }}</div>
                                    <div class="label">当日计划产量</div>
                                </div>
                            </div>
                            <bar-progress :progress="production.monthlyProductivity" title="生产品项月累达成率"
                                borderColor="border-green" innerCircleColor="inner-green" />
                            <div class="data-right">
                                <div class="top">
                                    <div class="value">{{ production.activeMonthlyOut }}</div>
                                    <div class="label">当月实际产量</div>
                                </div>
                                <div class="bottom">
                                    <div class="value">{{ production.plannedOutputNumMonth }}</div>
                                    <div class="label">当月计划产量</div>
                                </div>
                            </div>
                        </div>
                        <div class="h-92 dis-f jc-sb pl-26">
                            <div class="w-92 h-92">
                                <img class="w-100p h-100p" src="@/assets/images/yyjx_icon_cl.png" alt="" />
                            </div>
                            <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-30">
                                <!-- <div class="w-50p h-92 po-r">
                    <p class="lh-40px">当日实际产量(包)</p>
                    <div class="fw-700 fz-20 font-num">{{ production.activeDayOut }}</div>
                    <div class="po-a t-20 r-10 w-1 h-34 bgc-1a2f3d"></div>
                  </div>
                  <div class="w-50p po-r pl-20">
                    <p class="lh-40px">月产量(包)</p>
                    <div class="fw-700 fz-20 font-num">{{ production.activeMonthlyOut }}</div>
                  </div> -->
                                <div class="w-112 h-92">
                                    <p class="lh-40px">年度产量(包)</p>
                                    <div class="fw-700 fz-20 font-num">{{ production.activeYearOut }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="h-150 po-r">
                            <div class="po-a cur-p w-48 h-26 dis-f ai-c r-6 t--20 fz-14">
                                <base-select v-model="selectedDate" :list="timeList" />
                            </div>
                            <div class="quality-management">
                                <div class="percentage">
                                    <div class="value">
                                        <img src="@/assets/images/zhcc_icon_yshl.png" alt="" class="rotate" />
                                        <span>{{ toMoney(throughRate) }}</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <title-item title="直通率" />
                                </div>
                                <data-list class="ml-20 mt-20" :list="qualityList" backgroundColor="green" />
                            </div>
                        </div>
                    </div>
                </con-box>
                <con-box class="w-842 h-450" title="设备管理">
                    <div class="dis-f">
                        <div class="flex-1 dis-f jc-sb fd-c h-100p pt-10">
                            <div class="flex-1">
                                <div class="h-118 dis-f jc-sb pl-30">
                                    <div>
                                        <div class="w-86 h-76 po-r">
                                            <img class="w-100p h-100p" src="@/assets/images/zhcc_icon_cp.png" alt="" />
                                            <div class="po-a l-26 t-10 fz-18 c-fff fw-700 scale">
                                                {{ sbObj.device && sbObj.device.exceptionRate }}%
                                            </div>
                                        </div>
                                        <p class="fz-14 c-fff ta-c">故障率</p>
                                    </div>
                                    <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-40">
                                        <div class="w-128 h-92 po-r">
                                            <p class="lh-40px">故障时间</p>
                                            <div class="fw-700 fz-16 font-num mt-10">{{ sbObj.device &&
                                                sbObj.device.faultTime }}</div>
                                            <div class="po-a t-20 r-0 w-1 h-34 bgc-1a2f3d"></div>
                                        </div>
                                        <div class="w-106 po-r">
                                            <p class="lh-40px">实际排产时间</p>
                                            <div class="fw-700 fz-16 font-num mt-10">{{ sbObj.device &&
                                                sbObj.device.schedulingTime }}</div>
                                        </div>
                                        <div class="n"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="h-212">
                                <base-echarts :options="sbOptions" />
                            </div>
                        </div>
                        <div class="w-250 pt-50">
                            <div class="w-250 h-100 mb-40">
                                <base-echarts :options="sbPieOptions" />
                            </div>
                            <div class="flex-1 dis-f">
                                <div class="item">
                                    <div class="pic w-82 h-67 po-r">
                                        <div class="po-a fz-16 t-14 l-24 font-num">{{ sbObj.device && sbObj.device.mtbf
                                        }}h</div>
                                        <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w-100p h-100p" />
                                    </div>
                                    <p class="fz-12 c-B9BCC1 mt-6">故障平均间隔时间</p>
                                </div>
                                <div class="item ml-30">
                                    <div class="pic w-82 h-67 po-r">
                                        <div class="po-a fz-16 t-14 l-24 font-num">{{ sbObj.device && sbObj.device.mttr
                                        }}h</div>
                                        <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w-100p h-100p" />
                                    </div>
                                    <p class="fz-12 c-B9BCC1 mt-6">故障平均修复时间</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </con-box>
            </div>
            <div class="mt-10 dis-f jc-sb">
                <con-box class="pk-con h-450" title="品控管理">
                    <div class="pl-34 pr-34 pt-16 dis-f jc-sb">
                        <div class="w-345">
                            <div class="h-170">
                                <div class="dis-f pt-16 pl-20 pr-20 jc-sb">
                                    <div class="item w-138">
                                        <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">巡检不良次数</div>
                                        <div class="mt-20 w-138 h-102 po-r">
                                            <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                                            <div class="po-a text-linear t-20 text-align fz-16 c-70A3EF scale">
                                                <!-- <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.poorCount }}</span>次 -->
                                                <span class="fz-24">2</span>次
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item w-138">
                                        <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">产线不良品数量</div>
                                        <div class="mt-20 w-138 h-102 po-r">
                                            <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                                            <div class="po-a text-linear t-20 text-align fz-16 c-70A3EF scale">
                                                <!-- <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.defectiveNum }}</span>件 -->
                                                <span class="fz-24">1275</span>件
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="h-184">
                                <base-echarts :options="pkPieOptions" />
                            </div>
                        </div>
                        <div class="h-170 ">
                            <div class="quality-management bg-fh">
                                <div class="percentage">
                                    <div class="icon">
                                        <img src="@/assets/images/rect_3.png" alt="" class="img-item" />
                                        <img src="@/assets/images/aqsc_icon_fqclzb.png" alt="" class="rotate-fast" />
                                    </div>
                                    <title-item title="工艺符合率" />
                                </div>
                                <data-list class="ml-20" :list="gyList" margin="mb-10" />
                            </div>
                        </div>
                        <div class="w-418">

                            <div class="h-250">
                                <base-echarts :options="pkOptions" />
                            </div>
                        </div>
                    </div>
                </con-box>
            </div>
        </div>
        <div class="w-470">
            <con-box class="h-450" title="用能总金额">
                <div class="ta-c fz-16 c-B9BCC1">
                    总金额<span class="fz-24 c-fff ml-30 mr-20">{{ ynObj.sumAll }}</span>元
                </div>

                <div class="dis-f jc-sb mt-36 pl-60 pr-30 ta-c">
                    <div class="item c-B9BCC1 fz-16">
                        <div class="w-68 h-83 pic">
                            <img src="@/assets/images/cx_icon_zq.png" alt="" class="w-100p h-100p" />
                        </div>
                        <p class="mb-18">蒸汽总金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.streamSumTotal }}</span>元
                        </p>
                        <p class="mt-20 mb-10">单箱金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.streamSumSingle }}</span>元/箱
                        </p>
                    </div>
                    <div class="item c-B9BCC1 fz-16">
                        <div class="w-68 h-83 pic">
                            <img src="@/assets/images/cx_icon_d.png" alt="" class="w-100p h-100p" />
                        </div>
                        <p class="mb-18">电总金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.elecSumTotal }}</span>元
                        </p>
                        <p class="mt-20 mb-10">单箱金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.elecSumSingle }}</span>元/箱
                        </p>
                    </div>
                    <div class="item c-B9BCC1 fz-16">
                        <div class="w-68 h-83 pic">
                            <img src="@/assets/images/cx_icon_z.png" alt="" class="w-100p h-100p" />
                        </div>
                        <p class="mb-18">水总金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.waterSumTotal }}</span>元
                        </p>
                        <p class="mt-20 mb-10">单箱金额</p>
                        <p>
                            <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.waterSumSingle }}</span>元/箱
                        </p>
                    </div>
                </div>
            </con-box>
            <con-box class="h-450 mt-10" title="人效">
                <div class="item pl-30">
                    <div class="fz-18 c-fff">人员数量</div>
                    <div class="con">
                        <div class="dis-f jc-sb">
                            <div class="w-81 mt-20">
                                <div class="pic po-r w-81 h-71">
                                    <img src="@/assets/images/zhcc_icon_cp.png" alt="" class="w-100p h-100p" />
                                    <div class="po-a fz-16 t-14 l-24 font-num scale">{{ personObj.totalNumber }}</div>
                                </div>
                                <p class="c-fff fz-14 ta-c">总人数</p>
                            </div>
                            <div class="flex-1">
                                <data-list-no-line :list="aqList" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item pl-30">
                    <div class="fz-18 c-fff">千包总工时</div>
                    <div class="con dis-f jc-c">
                        <div class="pic w-96 po-r">
                            <div class="po-a fz-24 t-14 l-0 fw-700 c-fff font-style-italic scale">{{ personObj.totalhours }}
                            </div>
                            <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w-100p h-100p" />
                            <p class="fz-12 c-B9BCC1 mt-6 ta-c">全产线</p>
                        </div>
                    </div>
                </div>
            </con-box>
        </div>
    </div>
</template>
  
<script>
// iui
import {
    lineProduction,
    lineAmount,
    linePersonnel,
    lineQuality,
    lineDevice,
    lineEnergy,
    lineTendency,
    lineUsedDiff,
    lineElectro,
} from "@/api/apis";
import TitleItem from "@/components/TitleItem.vue";
import BaseSelect from "@/components/BaseSelect.vue";
import mixins from "@/mixins/refresh";

const barDate = [0, 0, 0, 0];

// -----------------合规性 start---------------------------
var data = [
    {
        name: "首检合格率",
        value: 98,
    },
    {
        name: "品评合格率",
        value: 99,
    },
    {
        name: "抽检合格率",
        value: 99,
    },
];
var titleArr = [],
    seriesArr = [];
var sCenter,
    TitleXy = {};
var colors = [
    ["#46C97D", "#1b2d2f"],
    ["#DC8439", "#1b2d2f"],
    ["#18F8F9", "#1b2d2f"],
    ["#6885D9", "#1b2d2f"],
    ["#FFF189", "#1b2d2f"],
];
data.forEach(function (item, index) {
    sCenter = [index * 35 + 14 + "%", "40%"];
    TitleXy = {
        left: index * 35 + 14 + "%",
        top: "74%",
    };
    titleArr.push({
        text: item.name,
        left: TitleXy.left,
        top: TitleXy.top,
        textAlign: "center",
        textStyle: {
            fontSize: nowSize(14),
            color: "#FFFFFF",
            textAlign: "center",
        },
    });
    seriesArr.push({
        name: item.name,
        type: "pie",
        clockWise: true,
        roundCap: true,
        barWidth: 60,
        radius: [34, 40],
        itemStyle: {
            normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: sCenter,
        data: [
            {
                value: item.value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value + "%";
                        },
                        position: "center",
                        show: true,
                        textStyle: {
                            fontSize: nowSize(14),
                            fontWeight: "bold",
                            fontStyle: "italic",
                            color: "#ffffff",
                        },
                    },
                },
            },
            {
                value: 100 - item.value,
                name: "invisible",
                tooltip: {
                    show: false,
                },
                itemStyle: {
                    normal: {
                        color: colors[index][1],
                    },
                    emphasis: {
                        color: colors[index][1],
                    },
                },
            },
        ],
    });
});

// -----------------合规性 end-----------------------

import BaseEcharts from "@/components/BaseEcharts.vue";
import ConBox from "@/components/ConBox.vue";
import { nowSize } from "@/utils/nowSize";
import * as echarts from "echarts";
import DataList from "@/components/DataList.vue";
import DataListNoLine from "../../components/DataListNoLine.vue";
import { getPie3D } from "@/assets/js/3d";
import BarProgress from "@/components/BarProgress.vue";
import "echarts-gl";
import { getSevenDays } from "@/utils/tools"

export default {
    name: "ProductionManagement_oneline",
    mixins: [mixins],
    components: {
        ConBox,
        BaseEcharts,
        BarProgress,
        DataList,
        TitleItem,
        DataListNoLine,
        BaseSelect,
    },
    data() {
        return {
            // fui
            timeList: [
                { label: "日", value: "day" },
                { label: "月", value: "month" },
            ],
            selectedDate: "day",
            energyObj: {},
            qualityObj: {},
            hzObj: {},
            ynObj: {},
            personObj: {},
            production: {},
            quality: {},
            sbObj: {},
            nhObj: {},
            aqList: [
                { label: "职员", value: "0", unit: "人" },
                { label: "自聘作业员", value: "0", unit: "人" },
                { label: "外包", value: "0", unit: "人" },
            ],
            qualityList: [
                { label: "克重机合格品个数", value: "0", unit: "" },
                { label: "生产总个数", value: "0", unit: "" },
            ],
            gyList: [
                { label: "当日工艺符合率", value: "0", unit: "%" },
                { label: "月累计工艺符合率", value: "0", unit: "%" },
                { label: "年累计工艺符合率", value: "0", unit: "%" },
            ],
            sbPieOptions: {
                title: [
                    {
                        text: "巡检完成率",
                        left: "26%",
                        top: "74%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: nowSize(14),
                            color: "#FFFFFF",
                            textAlign: "center",
                        },
                    },
                    {
                        text: "异常处理率",
                        left: "66%",
                        top: "74%",
                        textAlign: "center",
                        textStyle: {
                            fontSize: nowSize(14),
                            color: "#FFFFFF",
                            textAlign: "center",
                        },
                    },
                ],
                series: [
                    {
                        name: "巡检完成率",
                        type: "pie",
                        clockWise: true,
                        roundCap: true,
                        barWidth: 60,
                        radius: [20, 26],
                        itemStyle: {
                            normal: {
                                color: "#16A5F4",
                                shadowColor: "#16A5F4",
                                shadowBlur: 0,
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        hoverAnimation: false,
                        center: ["30%", "40%"],
                        data: [
                            {
                                value: 0,
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return params.value + "%";
                                        },
                                        position: "center",
                                        show: true,
                                        textStyle: {
                                            fontSize: nowSize(14),
                                            fontWeight: "bold",
                                            fontStyle: "italic",
                                            color: "#ffffff",
                                        },
                                    },
                                },
                            },
                            {
                                value: 100,
                                name: "invisible",
                                tooltip: {
                                    show: false,
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#1b2d2f",
                                    },
                                    emphasis: {
                                        color: "#1b2d2f",
                                    },
                                },
                            },
                        ],
                    },
                    {
                        name: "异常处理率",
                        type: "pie",
                        clockWise: true,
                        roundCap: true,
                        barWidth: 60,
                        radius: [20, 26],
                        itemStyle: {
                            normal: {
                                color: "#FFB508",
                                shadowColor: "#FFB508",
                                shadowBlur: 0,
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        hoverAnimation: false,
                        center: ["66%", "40%"],
                        data: [
                            {
                                value: 0,
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return params.value + "%";
                                        },
                                        position: "center",
                                        show: true,
                                        textStyle: {
                                            fontSize: nowSize(14),
                                            fontWeight: "bold",
                                            fontStyle: "italic",
                                            color: "#ffffff",
                                        },
                                    },
                                },
                            },
                            {
                                value: 100,
                                name: "invisible",
                                tooltip: {
                                    show: false,
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#1b2d2f",
                                    },
                                    emphasis: {
                                        color: "#1b2d2f",
                                    },
                                },
                            },
                        ],
                    },
                ],
                // tooltip: {
                //   trigger: "item",
                //   formatter: "2021年: {c}人",
                // },
            },
            pkPieOptions: {
                title: titleArr,
                series: seriesArr,
                // tooltip: {
                //   trigger: "item",
                //   formatter: "2021年: {c}人",
                // },
            },
            cxOptions: {
                animation: true,
                tooltip: {
                    trigger: "axis",
                    formatter: "{b} <br/>{a0} : {c0}",
                    backgroundColor: "rgba(0,0,0,.9)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    show: true,
                    top: 0,
                    icon: "rect",
                    right: "30%",
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    selectedMode: false, // 是否允许点击
                    data: ["产线耗能"],
                    textStyle: {
                        color: "#fefefe",
                        fontSize: nowSize(12),
                    },
                },
                grid: {
                    left: "5%",
                    top: "20%",
                    bottom: "5%",
                    right: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月"],
                        axisTick: {},
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(110, 130, 149, 0.30)",
                                width: 1,
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#adceea",
                                fontSize: nowSize(14),
                            },
                        },
                        interval: 1,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位: 能耗",
                        nameTextStyle: {
                            color: "#A1A6AA",
                            fontSize: nowSize(14),
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#A1A6AA",
                                fontSize: nowSize(14),
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],

                series: [
                    {
                        name: "产线耗能",
                        type: "bar",
                        barWidth: 12,
                        data: barDate,
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: "rgba(249, 249, 103, 0.2)",
                            },
                        },
                    },

                    // 背景
                    {
                        name: "",
                        type: "bar",
                        barWidth: 30,
                        barGap: "-100%",
                        itemStyle: {
                            normal: {
                                color: "rgba(18, 62, 98, 0.35)",
                            },
                        },
                        data: barDate.map((item) => ({
                            itemStyle: {
                                decal: {
                                    dashArrayX: [20, 0],
                                    dashArrayY: [5, 2],
                                    rotation: -45,
                                },
                            },
                            value: 100,
                        })),
                        z: -1,
                        xAxisIndex: 1,
                    },
                    // 顶部亮点
                    {
                        name: "123",
                        stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
                            },
                        },
                        data: barDate,
                    },
                    {
                        /*这个bar是横线的显示*/
                        name: "123",
                        stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "#f9f967",
                            },
                        },
                        data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
                    },
                ],
            },
            nyOptions: {
                animation: true,
                tooltip: {
                    trigger: "axis",
                    formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2} %",
                    backgroundColor: "rgba(0,0,0,.9)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    show: true,
                    top: 0,
                    icon: "rect",
                    right: "30%",
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    selectedMode: false, // 是否允许点击
                    data: ["用量", "单位用量", "标准比"],
                    textStyle: {
                        color: "#fefefe",
                        fontSize: nowSize(12),
                    },
                },
                grid: {
                    left: "5%",
                    top: "20%",
                    bottom: "5%",
                    right: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: [],
                        axisTick: {},
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(110, 130, 149, 0.30)",
                                width: 1,
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#adceea",
                                fontSize: nowSize(14),
                            },
                        },
                        interval: 1,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位: 能耗",
                        nameTextStyle: {
                            color: "#A1A6AA",
                            fontSize: nowSize(14),
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#A1A6AA",
                                fontSize: nowSize(14),
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],

                series: [
                    {
                        name: "用量",
                        type: "bar",
                        barWidth: 12,
                        data: barDate,
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: "rgba(255, 127, 14, 0.2)",
                            },
                        },
                    },
                    {
                        name: "单位用量",
                        type: "bar",
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                color: "rgba(1, 160, 246, 0.2)",
                            },
                        },
                        data: barDate.map((item) => ({
                            value: item + 5,
                        })),
                        z: 1,
                    },
                    {
                        name: "标准比",
                        type: "bar",
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                color: "rgba(70, 201, 125, 0.2)",
                            },
                        },
                        data: barDate.map((item) => ({
                            value: item + 15,
                        })),
                        z: 1,
                    },

                    // 背景
                    {
                        name: "",
                        type: "bar",
                        barWidth: 60,
                        barGap: "-100%",
                        itemStyle: {
                            normal: {
                                color: "rgba(18, 62, 98, 0.35)",
                            },
                        },
                        data: barDate.map((item) => ({
                            itemStyle: {
                                decal: {
                                    dashArrayX: [20, 0],
                                    dashArrayY: [5, 2],
                                    rotation: -45,
                                },
                            },
                            value: 100,
                        })),
                        z: -1,
                        xAxisIndex: 1,
                    },
                    // 顶部亮点
                    {
                        name: "123",
                        stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
                            },
                        },
                        data: barDate,
                    },
                    {
                        /*这个bar是横线的显示*/
                        name: "123",
                        stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "#ff7f0e",
                            },
                        },
                        data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
                    },

                    {
                        name: "123",
                        stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
                            },
                        },
                        data: barDate.map((item) => ({
                            value: item + 5,
                        })),
                    },
                    {
                        /*这个bar是横线的显示*/
                        name: "123",
                        stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "#01a0f6",
                            },
                        },
                        data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
                    },
                    {
                        name: "123",
                        stack: "breakevenEleGroup2" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
                            },
                        },
                        data: barDate.map((item) => ({
                            value: item + 15,
                        })),
                    },
                    {
                        /*这个bar是横线的显示*/
                        name: "123",
                        stack: "breakevenEleGroup2" /*数据组，需要设置才能将两个bar堆积在一起*/,
                        type: "bar",
                        barWidth: 12,
                        xAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: "#46c97d",
                            },
                        },
                        data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
                    },
                ],
            },
            sbOptions: {
                animation: true,
                tooltip: {
                    trigger: "axis",
                    formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2} %",
                    backgroundColor: "rgba(0,0,0,.9)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    show: true,
                    top: 0,
                    icon: "rect",
                    right: "20%",
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    selectedMode: false, // 是否允许点击
                    data: ["故障时间", "实际排产时间", "故障率"],
                    textStyle: {
                        color: "#fefefe",
                        fontSize: nowSize(12),
                    },
                },
                grid: {
                    left: "5%",
                    top: "20%",
                    bottom: "5%",
                    right: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月"],
                        axisTick: {},
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(110, 130, 149, 0.30)",
                                width: 1,
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#adceea",
                                fontSize: nowSize(14),
                            },
                        },
                        interval: 1,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                    {
                        type: "category",
                        data: [],
                        axisLine: { show: false },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        boundaryGap: true,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "故障率: %",
                        nameTextStyle: {
                            color: "#A1A6AA",
                            fontSize: nowSize(14),
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#A1A6AA",
                                fontSize: nowSize(14),
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: "value",
                        name: "时间",
                        nameTextStyle: {
                            color: "#A1A6AA",
                            fontSize: nowSize(14),
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#A1A6AA",
                                fontSize: nowSize(14),
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],

                series: [
                    {
                        name: "故障时间",
                        type: "bar",
                        barWidth: 10,
                        data: barDate,
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#709ED1",
                                    },
                                    {
                                        offset: 1,
                                        color: "#0C1E2C",
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: "实际排产时间",
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#74D3CC",
                                    },
                                    {
                                        offset: 1,
                                        color: "#0C1E2C",
                                    },
                                ]),
                            },
                        },
                        data: barDate.map((item) => ({
                            value: item + 35,
                        })),
                        z: 1,
                    },

                    // 背景
                    {
                        name: "",
                        type: "bar",
                        barWidth: 40,
                        barGap: "-100%",
                        itemStyle: {
                            normal: {
                                color: "rgba(18, 62, 98, 0.35)",
                            },
                        },
                        data: barDate.map((item) => ({
                            itemStyle: {
                                decal: {
                                    dashArrayX: [20, 0],
                                    dashArrayY: [5, 2],
                                    rotation: -45,
                                },
                            },
                            value: 100,
                        })),
                        z: -1,
                        xAxisIndex: 1,
                    },

                    {
                        name: "故障率",
                        type: "line",
                        showAllSymbol: true,
                        lineStyle: {
                            color: "#4c6173",
                        },
                        showSymbol: true,
                        symbol:
                            "image://",
                        symbolSize: 26,
                        itemStyle: {
                            normal: {
                                color: "#f67b0f",
                                borderColor: "#f67b0f",
                                borderWidth: 1,
                            },
                        },
                        data: ["30", "50", "40", "70"],
                        yAxisIndex: 1,
                    },
                ],
            },
            pkOptions: {
                animation: true,
                tooltip: {
                    trigger: "axis",
                    formatter: "{b} <br/>{a1} : {c1} %<br/> {a2} : {c2} %",
                    backgroundColor: "rgba(0,0,0,.9)",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    show: true,
                    top: 0,
                    icon: "rect",
                    right: "0%",
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    data: ["不良品率", "良品率"],
                    textStyle: {
                        color: "#fefefe",
                        fontSize: nowSize(12),
                    },
                },
                grid: {
                    left: "5%",
                    top: "14%",
                    bottom: "4%",
                    right: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: [],
                        axisTick: {},
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(110, 130, 149, 0.30)",
                                width: 1,
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#adceea",
                                fontSize: nowSize(14),
                            },
                        },
                        interval: 1,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位: %",
                        nameTextStyle: {
                            color: "#A1A6AA",
                            fontSize: nowSize(14),
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: "#A1A6AA",
                                fontSize: nowSize(14),
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],

                series: [
                    // 背景
                    {
                        name: "",
                        type: "bar",
                        barWidth: 40,
                        barGap: "-100%",
                        itemStyle: {
                            normal: {
                                color: "rgba(18, 62, 98, 0.35)",
                            },
                        },
                        data: barDate.map((item) => ({
                            itemStyle: {
                                decal: {
                                    dashArrayX: [20, 0],
                                    dashArrayY: [5, 2],
                                    rotation: -45,
                                },
                            },
                            value: 100,
                        })),
                        z: -1,
                    },
                    {
                        name: "不良品率",
                        type: "line",
                        showAllSymbol: true,
                        lineStyle: {
                            color: "#4c6173",
                        },
                        showSymbol: true,
                        symbol:
                            "image://",
                        symbolSize: 26,
                        itemStyle: {
                            normal: {
                                color: "#f67b0f",
                                borderColor: "#f67b0f",
                                borderWidth: 1,
                            },
                        },
                        data: [],
                    },
                    {
                        name: "良品率",
                        type: "line",
                        showAllSymbol: true,
                        lineStyle: {
                            color: "#4c6173",
                        },
                        showSymbol: true,
                        symbol:
                            "image://",
                        symbolSize: 26,
                        itemStyle: {
                            normal: {
                                color: "rgba(172, 213, 152, 1)",
                                borderColor: "rgba(172, 213, 152, 1)",
                                borderWidth: 1,
                            },
                        },
                        data: [],
                    },
                ],
            },
            peakOptions: {
                legend: {
                    top: "center",
                    left: "60%",
                    orient: "vertical",
                    icon: "circle",
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        fontSize: nowSize(14),
                        rich: {
                            label: {
                                color: "#fff",
                                padding: [0, 0, 0, 10],
                            },
                            value: {
                                color: "#5fa7d7",
                                padding: [0, 0, 0, 30],
                            },
                        },
                    },
                },
                tooltip: {
                    show: false,
                },
                // labelLine: {
                //   show: false,
                // },
                // label: {
                //   show: true,
                //   position: "inside",
                //   formatter: "{d}%",
                // },
                xAxis3D: {
                    min: -1,
                    max: 1,
                },
                yAxis3D: {
                    min: -1,
                    max: 1,
                },
                zAxis3D: {
                    min: -1,
                    max: 1,
                },
                grid3D: {
                    show: false,
                    boxHeight: nowSize(20),
                    boxWidth: nowSize(110),
                    left: "-20%",
                    viewControl: {
                        alpha: 30,
                        beta: 0,
                        distance: 500, //调整视角到主体的距离，类似调整zoom
                        rotateSensitivity: 0, // 设置为0无法旋转
                        zoomSensitivity: 0, // 设置为0无法缩放
                        panSensitivity: 0, // 设置为0无法平移
                        autoRotate: false, // 自动旋转
                    },
                },
                series: [],
            },
            monthSelected: "",
            monthList: [
                // {label:"一月",value:'1'},
                // {label:"二月",value:'2'},
                // {label:"三月",value:'3'},
                // {label:"四月",value:'4'},
                // {label:"五月",value:'5'},
                // {label:"六月",value:'6'},
                // {label:"七月",value:'7'},
                // {label:"八月",value:'8'},
                // {label:"九月",value:'9'},
                // {label:"十月",value:'10'},
                // {label:"十一月",value:'11'},
                // {label:"十二月",value:'12'},
            ],
        };
    },
    computed: {
        throughRate() {
            let result = "";
            const { throughRateDay, throughRateMonth, throughRateYear } = this.quality;
            if (this.selectedDate === "day") {
                result = throughRateDay;
            } else if (this.selectedDate === "month") {
                result = throughRateMonth;
            } else {
                result = throughRateYear;
            }
            return result;
        },
    },
    created() {
        console.log(
            (100 - 78.12).toFixed(),
            (100 - 78.5).toFixed(),
            (100 - 79.81).toFixed(),
            (100 - 79.84).toFixed(),
            (100 - 82.12).toFixed(),
            (100 - 79.79).toFixed(),
            (100 - 80.05).toFixed(),
        );
        // 获取query参数
        this.query = this.$route.query;
        this.initMonthData();
        this.init();
    },
    watch: {
        selectedDate(newV, oldV) {
            if (oldV === newV) return;
            if (newV === "day") {
                // 日
                this.qualityList = [
                    { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
                    { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
                ];
            } else if (newV === "month") {
                // 月
                this.qualityList = [
                    { label: "克重机合格品个数", value: this.quality.productionMonth, unit: "" },
                    { label: "生产总个数", value: this.quality.rawProductionMonth, unit: "" },
                ];
            } else {
                // 年
                this.qualityList = [
                    { label: "克重机合格品个数", value: this.quality.productionYear, unit: "" },
                    { label: "生产总个数", value: this.quality.rawProductionYear, unit: "" },
                ];
            }
        },
        monthSelected(newV) {
            this.lineElectro();
        },
    },
    methods: {
        // hui
        init() {
            this.lineProduction();
            this.lineDevice();
            this.linePersonnel();
            this.lineAmount();
            this.lineUsedDiff();
            this.lineQuality();
            this.lineEnergy();
            this.lineElectro();
        },
        toMoney(num, isTenThousand) {
            if (!num) return "0";
            if (isNaN(Number(num))) {
                // 如果不是个数字, 去掉,
                num = num.replaceAll(",", "");
            }
            if (isTenThousand) {
                num = +num / 10000;
            }
            if (+num > 9999.999999) return Math.floor(+num).toLocaleString();
            num = Math.floor(+num * 100) / 100;
            num = (+num).toLocaleString();
            let dotIndex = num.indexOf(".");
            if (dotIndex === -1) num = num + "";
            if (dotIndex === num.length - 3) num;
            if (dotIndex === num.length - 2) num = num + "";
            return num;
        },
        // 初始化月份选择
        initMonthData() {
            const date = new Date();
            const year = date.getFullYear();
            const currentMonth = date.getMonth() + 1;
            this.monthSelected = year + `-${currentMonth}`;

            this.monthList = [
                { label: "一月", value: year + "-1" },
                { label: "二月", value: year + "-2" },
                { label: "三月", value: year + "-3" },
                { label: "四月", value: year + "-4" },
                { label: "五月", value: year + "-5" },
                { label: "六月", value: year + "-6" },
                { label: "七月", value: year + "-7" },
                { label: "八月", value: year + "-8" },
                { label: "九月", value: year + "-9" },
                { label: "十月", value: year + "-10" },
                { label: "十一月", value: year + "-11" },
                { label: "十二月", value: year + "-12" },
            ];
        },

        /**
         * 24小时用电峰谷
         * @param name 描述信息
         */
        async lineElectro() {
            // let { code, data } =
            //   (await lineElectro({
            //     ...this.query,
            //     month: this.monthSelected,
            //   }).catch((err) => {
            //     err;
            //   })) || {};

            const data = {
                "createBy": "1",
                "createTime": "2023-10-03 00:00:00",
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "id": 3,
                "factoryName": "杭州顶益工厂",
                "materialType": null,
                "beginTime": null,
                "endTime": null,
                "isDel": "0",
                "electroJf": "24%",
                "electroFd": "18%",
                "electroPd": "16%",
                "electroGd": "42%",
                "month": "2023-10",
                "workshopName": "制面一车间",
                "lineName": "桶面二产线",
                "electroJfValue": "20",
                "electroFdValue": "300",
                "electroPdValue": "403",
                "electroGdValue": "504"
            };

            if (true) {
                const optionsData = [
                    {
                        name: "波",
                        value: data.electroJf && +data.electroJf.slice(0, -1),
                        itemStyle: {
                            color: "#00D7E9",
                        },
                    },
                    {
                        name: "峰",
                        value: data.electroFd && +data.electroFd.slice(0, -1),
                        itemStyle: {
                            color: "#5DCCFE",
                        },
                    },
                    {
                        name: "平",
                        value: data.electroPd && +data.electroPd.slice(0, -1),
                        itemStyle: {
                            color: "#68B7E7",
                        },
                    },
                    {
                        name: "谷",
                        value: data.electroGd && +data.electroGd.slice(0, -1),
                        itemStyle: {
                            color: "#34D492",
                        },
                    },
                ];

                const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);

                series.push({
                    name: "pie2d",
                    type: "pie",
                    label: {
                        show: true,
                        formatter: "{d}%",
                        opacity: 1,
                        fontSize: 14,
                        position: "inside",
                        color: "#fff",
                    },
                    labelLine: {
                        show: false,
                    },
                    startAngle: 70, //起始角度，支持范围[0, 360]。
                    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                    radius: ["40%", "25%"],
                    center: ["32%", "50%"],
                    data: optionsData,
                    itemStyle: {
                        opacity: 0,
                    },
                });
                this.peakOptions.series = series;
                const { electroJfValue, electroPdValue, electroFdValue, electroGdValue } = data;
                this.peakOptions.legend.formatter = (name) => {
                    let obj = {
                        波: electroJfValue,
                        平: electroPdValue,
                        峰: electroFdValue,
                        谷: electroGdValue,
                    };
                    if (!obj[name]) obj[name] = 0;
                    return `{label|${name}}{value|${obj[name]}kwh}`;
                };
            }
        },

        /**
         * 耗资差异率
         * @param name 描述信息
         */
        async lineUsedDiff() {
            let { code, data } =
                (await lineUsedDiff({
                    ...this.query,
                }).catch((err) => {
                    err;
                })) || {};
            if (code === 200) {
                this.hzObj = data;
            }
        },

        /**
         * 用能总金额
         * @param name 描述信息
         */
        async lineAmount() {
            // let { code, data } =
            //     (await lineAmount({
            //         ...this.query,
            //     }).catch((err) => {
            //         err;
            //     })) || {};

            const code = 200, data = {
                "createBy": "1",
                "createTime": "2023-09-30 00:00:00",
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "id": 3,
                "materialType": null,
                "factoryName": "杭州顶益工厂",
                "workshopName": "制面一车间",
                "lineName": "桶面二产线",
                "isDel": "0",
                "month": "9",
                "waterSumTotal": "20516.4",
                "elecSumTotal": "201771.8",
                "streamSumTotal": "538968.2",
                "waterSumSingle": "0.0",
                "elecSumSingle": "0.3",
                "streamSumSingle": "0.7",
                "sumAll": "761256.4"
            };
            if (code === 200) {
                this.ynObj = data;
            }
        },

        /**
         * 生产管理
         * @param name 描述信息
         */
        async lineProduction() {
            // let { code, data } =
            //   (await lineProduction({
            //     ...this.query,
            //   }).catch((err) => {
            //     err;
            //   })) || {};
            let code = 200,
                data = {
                    production: {
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        remark: null,
                        id: 1,
                        factoryName: "杭州顶益工厂",
                        workshopName: "制面一车间",
                        lineName: "桶面二产线",
                        activeYearOut: "1000",
                        activeMonthlyOut: "2000",
                        activeDayOut: "30000",
                        plannedOutputNumMonth: "728000",
                        plannedOutputNum: "28000",
                        dailyProductivity: "60",
                        monthlyProductivity: "70",
                        totalhours: "800",
                    },
                    quality: {
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: "2023-10-20 18:57:12",
                        remark: null,
                        id: 3,
                        recordDate: null,
                        factoryName: "杭州顶益工厂",
                        workshopName: "制面一车间",
                        lineName: "桶面二产线",
                        throughRateDay: "0",
                        productionDay: "0",
                        rawProductionDay: "0",
                        throughRateMonth: "99.7623",
                        productionMonth: "30257058",
                        rawProductionMonth: "30329140",
                        throughRateYear: "50",
                        productionYear: "16",
                        rawProductionYear: "400",
                        qualifiedNumber: "200",
                        produceNumber: "200",
                        throughRate: "30",
                    },
                };
            if (code === 200) {
                let day = new Date();
                let dayRadio = (day.getHours() - 7) / 12;
                let dayNumRadio = day.getDate() / 31;
                if (this.query.lineName == "桶面二产线") {
                    // 第二产线
                    console.log("TCL: =======>", "22222222");
                    data = {
                        production: {
                            createBy: null,
                            createTime: null,
                            updateBy: null,
                            updateTime: null,
                            remark: null,
                            id: 1,
                            factoryName: "杭州顶益工厂",
                            workshopName: "制面一车间",
                            lineName: "桶面二产线",
                            activeYearOut: "1000",
                            activeMonthlyOut: "2000",
                            activeDayOut: "30000",
                            plannedOutputNumMonth: "728000",
                            plannedOutputNum: "28000",
                            dailyProductivity: "98.5",
                            monthlyProductivity: "70",
                            totalhours: "800",
                        },
                        quality: {
                            createBy: null,
                            createTime: null,
                            updateBy: null,
                            updateTime: "2023-10-20 18:57:12",
                            remark: null,
                            id: 3,
                            recordDate: null,
                            factoryName: "杭州顶益工厂",
                            workshopName: "制面一车间",
                            lineName: "桶面二产线",
                            throughRateDay: "0",
                            productionDay: "0",
                            rawProductionDay: "0",
                            throughRateMonth: "99.7623",
                            productionMonth: "30257058",
                            rawProductionMonth: "30329140",
                            throughRateYear: "50",
                            productionYear: "16",
                            rawProductionYear: "400",
                            qualifiedNumber: "200",
                            produceNumber: "200",
                            throughRate: "30",
                        },
                    };
                    this.production = data.production;
                    this.quality = data.quality;
                    return;
                }
                this.production = data.production;
                this.quality = data.quality;

                this.$set(this.production, "dailyProductivity", (dayRadio * 100).toFixed());
                this.$set(this.production, "activeDayOut", (dayRadio * 28000).toFixed());
                this.$set(this.production, "monthlyProductivity", (dayNumRadio * 100).toFixed());
                this.$set(this.production, "activeMonthlyOut", (dayNumRadio * 728000).toFixed());
                this.$set(this.production, "activeYearOut", 487.8 + +this.production.activeMonthlyOut);

                // 日
                this.qualityList = [
                    { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
                    { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
                ];
            }
        },
        /**
         * 人效管理
         * @param name 描述信息
         */
        async linePersonnel() {
            // let { code, data } =
            //     (await linePersonnel({
            //         ...this.query,
            //     }).catch((err) => {
            //         err;
            //     })) || {};
            const code = 200, data = {
                "personnel": {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 3,
                    "factoryName": "杭州顶益工厂",
                    "workshopName": "制面一车间",
                    "lineName": "桶面二产线",
                    "totalNumber": 26,
                    "clerkNumber": 3,
                    "securityStaffNumber": 20,
                    "outsourceNumber": 3,
                    "entryNumber": 49,
                    "departNumber": 1
                },
                "totalhours": "0.8KB/H"
            };
            if (code === 200) {
                this.personObj = {
                    ...data.personnel,
                    totalhours: data.totalhours,
                };
                this.aqList = [
                    { label: "职员", value: this.personObj.clerkNumber, unit: "人" },
                    { label: "自聘作业员", value: this.personObj.securityStaffNumber, unit: "人" },
                    { label: "外包", value: this.personObj.outsourceNumber, unit: "人" },
                ];
            }
        },
        /**
         * 品控管理
         * @param name 描述信息
         */
        async lineQuality() {
            // let { code, data } =
            //     (await lineQuality({
            //         ...this.query,
            //     }).catch((err) => {
            //         err;
            //     })) || {};
            const code = 200, data = {
                "productRateList": [
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": "2023-10-04 14:30:20",
                        "remark": null,
                        "id": 14,
                        "recordDate": "2023-10-19",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "500",
                        "defectBudget": "1098",
                        "defectRadio": "78.12",
                        "qualifiedRadio": "21.88"
                    },
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": "2023-10-04 14:30:20",
                        "remark": null,
                        "id": 15,
                        "recordDate": "2023-10-20",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "546",
                        "defectBudget": "986",
                        "defectRadio": "78.50",
                        "qualifiedRadio": "21.50"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-20 15:13:32",
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 23,
                        "recordDate": "2023-10-21",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "0",
                        "defectBudget": "0",
                        "defectRadio": "79.81",
                        "qualifiedRadio": "20.19"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-20 17:03:27",
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 25,
                        "recordDate": "2023-10-22",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "0",
                        "defectBudget": "0",
                        "defectRadio": "79.84",
                        "qualifiedRadio": "20.16"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-20 17:08:19",
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 27,
                        "recordDate": "2023-10-23",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "0",
                        "defectBudget": "0",
                        "defectRadio": "82.12",
                        "qualifiedRadio": "17.88"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-20 17:18:28",
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 29,
                        "recordDate": "2023-10-24",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "0",
                        "defectBudget": "0",
                        "defectRadio": "79.79",
                        "qualifiedRadio": "20.21"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-20 17:18:28",
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 29,
                        "recordDate": "2023-10-25",
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "defect": "0",
                        "defectBudget": "0",
                        "defectRadio": "80.05",
                        "qualifiedRadio": "19.95"
                    }
                ],
                "quality": {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 1,
                    "factoryName": "杭州顶益工厂",
                    "workshopName": "制面一车间",
                    "lineName": "桶面二产线",
                    "defectiveNum": "1275",
                    "firstPassRate": "100",
                    "evaluationPassRate": "100",
                    "poorCount": "2",
                    "processConformityRate": "50",
                    "checkRate": "100",
                    "numbeComplaints": "100",
                    "complaintRate": "20",
                    "grantComplaintRate": "30",
                    "conformDay": "98.9",
                    "conformMonth": "99.3",
                    "conformYear": "99.3"
                }
            };
            if (code === 200) {
                const dates = getSevenDays();
                this.qualityObj = data;
                let arr = ["firstPassRate", "evaluationPassRate", "checkRate"];
                // this.pkPieOptions.series.forEach((item, index) => {
                //     item.data[0].value = this.qualityObj.quality[arr[index]];
                //     item.data[1].value = 100 - this.qualityObj.quality[arr[index]];
                // });

                // this.gyList = [
                //     { label: "当日工艺符合率", value: this.qualityObj.quality.conformDay, unit: "%" },
                //     { label: "月累计工艺符合率", value: this.qualityObj.quality.conformMonth, unit: "%" },
                //     { label: "年累计工艺符合率", value: this.qualityObj.quality.conformYear, unit: "%" },
                // ];

                this.gyList = [
                    { label: "当日工艺符合率", value: 98.90, unit: "%" },
                    { label: "月累计工艺符合率", value: 99.30, unit: "%" },
                    { label: "年累计工艺符合率", value: 99.30, unit: "%" },
                ];
                // 折线图
                let defectRadioArr = this.qualityObj.productRateList.map((item) => item.defectRadio);
                let qualifiedRadioArr = this.qualityObj.productRateList.map((item) => item.qualifiedRadio);

                let max = Math.max(...defectRadioArr, ...qualifiedRadioArr);
                // 对x轴进行赋值
                this.pkOptions.xAxis[0].data = dates;
                // this.qualityObj.productRateList.map((item) => {
                //   return item.recordDate;
                // });
                // this.pkOptions.series[1].data = defectRadioArr;
                this.pkOptions.series[1].data = defectRadioArr;
                this.pkOptions.series[2].data = qualifiedRadioArr;
                this.pkOptions.series[0].data = defectRadioArr.map((item) => ({
                    itemStyle: {
                        decal: {
                            dashArrayX: [20, 0],
                            dashArrayY: [5, 2],
                            rotation: -45,
                        },
                    },
                    value: 100,
                }));
            }
        },

        /**
         * 设备管理
         * @param name 描述信息
         */
        async lineDevice() {
            // let { code, data } =
            //     (await lineDevice({
            //         ...this.query,
            //     }).catch((err) => {
            //         err;
            //     })) || {};
            const code = 200, data = {
                "faultList": [
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 2,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-09-30",
                        "name": "线2",
                        "failureRate": "10",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 3,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-10-01",
                        "name": "线3",
                        "failureRate": "50",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 4,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-10-02",
                        "name": "线4",
                        "failureRate": "40",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 5,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-10-03",
                        "name": "线5",
                        "failureRate": "70",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 6,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-10-04",
                        "name": "线6",
                        "failureRate": "50",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-01 20:07:43",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:52",
                        "remark": null,
                        "id": 1,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-09-29",
                        "name": "线1",
                        "failureRate": "20",
                        "productionTime": "10",
                        "failureTime": "20"
                    },
                    {
                        "createBy": null,
                        "createTime": "2023-10-03 23:44:28",
                        "updateBy": null,
                        "updateTime": "2023-10-03 23:44:57",
                        "remark": null,
                        "id": 10,
                        "factoryName": "杭州顶益工厂",
                        "workshopName": "制面一车间",
                        "lineName": "桶面二产线",
                        "recordDate": "2023-10-03",
                        "name": "线5",
                        "failureRate": "30",
                        "productionTime": "10",
                        "failureTime": "20"
                    }
                ],
                "device": {
                    "createBy": null,
                    "createTime": "2023-10-05 10:15:06",
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 2,
                    "factoryName": "杭州顶益工厂",
                    "workshopName": "制面一车间",
                    "lineName": "桶面二产线",
                    "devicesAll": "1000",
                    "devicesNormal": "200",
                    "devicesOffline": "60",
                    "startupProgress": "68",
                    "timeRate": "21",
                    "performanceRate": "66",
                    "faultRate": "1.37",
                    "setsinuse": "90",
                    "guzhRate": "12",
                    "faultTime": "9.28分钟/班.线",
                    "schedulingTime": "11.25小时/班",
                    "exceptionRate": "87.5",
                    "mtbf": "80",
                    "mttr": "90",
                    "patrolRate": "90.16"
                }
            };
            if (code === 200) {
                const dates = getSevenDays();
                this.sbObj = data;
                this.sbPieOptions.series[0].data[0].value = data.device.patrolRate;
                this.sbPieOptions.series[0].data[1].value = 100 - data.device.patrolRate;
                this.sbPieOptions.series[1].data[0].value = data.device.exceptionRate;
                this.sbPieOptions.series[1].data[1].value = 100 - data.device.exceptionRate;

                let failureTimeArr = data.faultList.map((item) => item.failureTime);
                let productionTimeArr = data.faultList.map((item) => item.productionTime);
                let failureRateArr = data.faultList.map((item) => item.failureRate);
                let recordDateArr = data.faultList.map((item) => item.recordDate);
                let failureTimeMax = Math.max(...failureTimeArr);
                let productionTimeMin = Math.min(...productionTimeArr);

                this.sbOptions.series[0].data = failureTimeArr;
                this.sbOptions.series[1].data = productionTimeArr;

                this.sbOptions.series[2].data = failureTimeArr.map((item) => ({
                    itemStyle: {
                        decal: {
                            dashArrayX: [20, 0],
                            dashArrayY: [5, 2],
                            rotation: -45,
                        },
                    },
                    value: 100,
                }));
                this.sbOptions.series[3].data = failureRateArr;
                this.sbOptions.xAxis[0].data = dates //recordDateArr;
            }
        },
        /**
         * 能源管理
         * @param name 描述信息
         */
        async lineEnergy() {
            let { code, data } =
                (await lineEnergy({
                    ...this.query,
                }).catch((err) => {
                    err;
                })) || {};
            if (code === 200) {
                this.energyObj = data.energy;
                // energyLines.dosage

                let x1 = data.energyLines.map((item) => item.recordDate);
                let y1 = data.energyLines.map((item) => item.dosage);
                let y2 = data.energyLines.map((item) => item.dosageUnit);
                let y3 = data.energyLines.map((item) => item.standardRadio);
                let max = Math.max(...y1, ...y2, ...y3);
                this.nyOptions.xAxis[0].data = x1;
                this.nyOptions.xAxis[1].data = x1;
                this.nyOptions.xAxis[2].data = x1;
                this.nyOptions.series[0].data = y1;
                this.nyOptions.series[1].data = y2;
                this.nyOptions.series[2].data = y3;
                this.nyOptions.series[3].data = y2.map((item) => ({
                    itemStyle: {
                        decal: {
                            dashArrayX: [20, 0],
                            dashArrayY: [5, 2],
                            rotation: -45,
                        },
                    },
                    value: max + 100,
                }));
                this.nyOptions.series[4].data = y1;
                this.nyOptions.series[5].data = data.energyLines.map((item) => max / 75);
                this.nyOptions.series[6].data = y2;
                this.nyOptions.series[7].data = data.energyLines.map((item) => max / 75);
                this.nyOptions.series[8].data = y3;
                this.nyOptions.series[9].data = data.energyLines.map((item) => max / 75);

                // 产线耗能
                let hnx1 = data.energyDays.map((item) => item.lineName);
                let hny1 = data.energyDays.map((item) => item.consumption);
                let hnMax = Math.max(...hny1);

                this.cxOptions.xAxis[0].data = hnx1;
                this.cxOptions.xAxis[1].data = hnx1;
                this.cxOptions.xAxis[2].data = hnx1;
                this.cxOptions.series[0].data = hny1;
                this.cxOptions.series[1].data = hny1.map((item) => ({
                    itemStyle: {
                        decal: {
                            dashArrayX: [20, 0],
                            dashArrayY: [5, 2],
                            rotation: -45,
                        },
                    },
                    value: hnMax + 100,
                }));
                this.cxOptions.series[2].data = hny1;
                this.cxOptions.series[3].data = data.energyDays.map((item) => hnMax / 75);

                // this.nyOptions.xAxis= data.energyLines.map(item=>item.recordDate)
                // this.nyOptions.series[0].data = data.energyLines.map(item=>item.dosage)
                // this.nyOptions.series[1].data = data.energyLines.map(item=>item.dosageUnit)
                // this.nyOptions.series[2].data = data.energyLines.map(item=>item.standardRadio)
            }
        },

        /**
         * 能耗趋势
         * @param name 描述信息
         */
        async lineTendency() {
            let { code, data } =
                (await lineTendency({
                    ...this.query,
                }).catch((err) => {
                    err;
                })) || {};
            if (code === 200) {
            }
        },
    },
};
</script>
  
<style scoped lang="scss">
// jui

.productionManagement {
    background-color: rgba(5, 31, 65, 0.8);

    .pk-con {
        width: 100%;
        background: linear-gradient(0deg, rgba(6, 15, 25, 0.91), rgba(20, 25, 32, 0));
    }

    .font-num {
        font-weight: bold;
        font-style: italic;
        background-image: -webkit-linear-gradient(bottom, #ffffff, #14a9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.quality-management {
    padding: 0 20px;
    display: flex;
    align-items: center;

    ::v-deep {
        .title-con {
            width: 106px;
        }
    }

    .value {
        position: relative;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 106px;
        height: 106px;
        background-size: 100%;

        span:nth-child(2) {
            font-size: 28px;
            color: #fff;
        }

        .unit {
            font-size: 20px;
            font-family: Microsoft YaHei;
            color: #ffffff;
            opacity: 0.53;
        }

        img {
            position: absolute;
            z-index: -10;
            width: 100%;
        }
    }
}

.bg-item {
    background: url("~@/assets/images/aqsc_icon_zxk.png") no-repeat;
    background-size: 100% 100%;
}

.text-linear {
    background: linear-gradient(179deg, rgba(112, 163, 239, 0.77) 0%, rgba(255, 255, 255, 0.77) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-style: italic;
}

.bg-fh {
    .icon {
        position: relative;
    }

    .rotate-fast {
        width: 117px;
        height: 117px;
    }

    .img-item {
        position: absolute;
        z-index: 999;
        left: 50%;
        top: 46%;
        transform: translate(-50%, -50%);
        width: 71px;
        height: 71px;
    }
}

.production-top {
    padding: 20px;
    text-align: center;

    .data {
        margin-right: 30px;
    }

    .value {
        font-size: 18px;
    }

    .label {
        font-size: 14px;
        color: #7bbff2;
    }

    .top {
        padding-bottom: 5px;
        position: relative;

        &::after {
            position: absolute;
            content: "";
            left: "50%";
            transform: translate(-50%);
            bottom: -3px;
            width: 43px;
            height: 2px;
            background: linear-gradient(244deg, rgba(42, 67, 86, 0) 0%, rgba(42, 67, 86, 1) 50%, rgba(42, 67, 86, 0) 100%);
        }
    }

    .bottom {
        padding-top: 5px;
    }

    .data-right {
        .label {
            color: #4ee38c;
        }
    }
}

::v-deep {
    .detail {
        .item {
            margin-bottom: 4px;
        }
    }
}

.d3-bg {
    width: 217px;
    position: absolute;
    top: 55%;
    left: 7%;
}

.text-align {
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
</style>
  